<template>
  <div class="registered">
    <Bar></Bar>
    <div class="user-registered">
      <div class="title">注册账号</div>
      <el-form
        :model="registeredRuleForm"
        :rules="rules"
        ref="registeredRuleForm"
        label-width="100px"
        class="demo-ruleForm"
        hide-required-asterisk
      >
        <div class="phone-number">
          <el-form-item
            label="手机号码"
            prop="phoneNumber"
            style="padding-top: 40px"
          >
            <el-select v-model="value" placeholder="请选择" style="width: 90px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              placeholder="今后使用手机号登录"
              v-model="registeredRuleForm.phoneNumber"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </div>
        <div class="validation">
          <el-form-item
            label="短信验证码"
            prop="validation"
            style="padding-top: 40px"
          >
            <el-input
              placeholder="填写6位短信验证码"
              v-model="registeredRuleForm.validation"
              style="width: 230px"
            >
            </el-input>
            <el-button
            :disabled="disabled"
            @click="getCode"
            style="border:0;color:#155bd4;width:70px;padding:0"
            >{{btnTxt}}</el-button
          >
          </el-form-item>
        </div>
        <div class="password">
          <el-form-item
            label="登录密码"
            prop="password"
            style="padding-top: 40px"
          >
            <el-input
              placeholder="请输入密码"
              v-model="registeredRuleForm.password"
              show-password
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label-width="0" style="margin-top: 50px">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认注册</el-button
          >
        </el-form-item>
        <el-form-item
          prop="type"
          label-width="0"
          style="padding-top: 30px"
        >
          <el-checkbox
            label="已阅读并同意"
            name="type"
            v-model="registeredRuleForm.type"
          ></el-checkbox>
          <el-link
            href="#"
            target="_blank"
            :underline="false"
            type="primary"
            >用户协议、隐私政策</el-link
          >
          <router-link to="/login" target="_blank">
          <el-link
            :underline="false"
            type="primary"
            style="margin-left: 30px"
            >已有账号，直接登录</el-link
          >
          </router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Bar from '../../components/bar';
export default {
  components: {
    Bar
  },
  data () {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/;
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('密码长度为8-20必须包含字母和数字'))
        }
      }
    }
    return {
      registeredRuleForm: {
        phoneNumber: '',
        validation: '',
        password: '',
        type: ''
      },
      rules: {
        phoneNumber: [
          { validator: checkPhone, trigger: 'change' }
        ],
        validation: [
          { required: true, message: '请填写短信验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '短信验证码是6位数字', trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, trigger: 'change' }
        ]
      },
      btnTxt: '获取验证码',
      disabled: false,
      time: 0,
      options: [{
        value: '1',
        label: '中国+86'
      }, {
        value: '2',
        label: '阿根廷+54'
      }],
      value: '1'
    };
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取手机验证码
    getCode () {
      // 1校验手机号
      if (!this.registeredRuleForm.phoneNumber) {
        // 手机号校验不通过
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        });
      } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.registeredRuleForm.phoneNumber)) {
        // 此处失去焦点后自动触发校验手机号规则
      } else {
        // 2手机号校验通过 发送axios请求 获取验证码
        this.time = 30;
        this.disabled = true;
        this.timer();// 调用倒计时方法
      }
    },
    // 倒计时方法
    timer () {
      if (this.time > 0) {
        this.time--;
        // console.log(this.time);
        this.btnTxt = this.time + 's重新获取';
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = '获取验证码';
        this.disabled = false;
      }
    }
  }
}

</script>

<style lang="less" scoped>
.registered {
  width: 100%;
  min-height: 100vh;
  .user-registered {
    width: 400px;
    margin: 0 auto;
    color: #323233;
    .title {
      margin: 60px auto 19px;
      font-size: 32px;
      font-family: PingFangSC-Semibold;
      text-align: center;
    }
    .phone-number,
    .validation,
    .password {
      border-bottom: 1px solid #e5e5e5;

    }
    .el-form-item {
      margin-bottom: 1px;
    }
    /deep/.el-checkbox__label {
      color: #333;
    }
    /deep/.el-form-item__label {
      font-weight: bold;
      font-size: 14px;
      text-align: left;
      color: #333;
    }
    /deep/.el-input__inner {
      border: 0;
      height: 30px;
      padding: 0;
    }
    .el-button--primary {
      background-color: #155bd4;

    }
    .el-button {
      width: 100%;
      height: 45px;
      border-radius: 2px;
    }
    .el-link {
      color: #155bd4;
    }
  }
}
</style>
